<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-L-admin1.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .layui-table-cell {
            height: auto;
        }
    </style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-primary layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:38px">ဂ</i></a>
</div>
<div class="x-body">


    <div class="layui-row" style="margin-left: 20%">
        <form class="layui-form layui-col-md12 x-so">
            <input type="text" name="gname" id="gname" style="width: 300px" placeholder="请输入商品名称" autocomplete="off"
                   class="layui-input">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            价格：
            <input type="text" id="lowernum" name="lowernum" class="layui-input"> -
            <input type="text" id="uppernum" name="uppernum" class="layui-input">
            <button id="btn" class="layui-btn" type="button" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i>
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span id="error" style="color: red"></span>
        </form>
    </div>


    <xblock>
        <button class="layui-btn layui-btn-danger" id="delAll"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="x_admin_show('添加用户','./goods-add.html')"><i class="layui-icon"></i>添加
        </button>
        <span class="x-right" style="line-height:40px">共有数据：88 条</span>
    </xblock>

    <!-- x_admin_show('编辑','goods-edit.html')-->
    <script type="text/html" id="barDemo">
        <a title="查看" lay-event="edit" onclick="" href="javascript:;">
            <i class="layui-icon">&#xe63c;</i>
        </a>
        <a title="删除" lay-event="del" onclick="member_del(this,'要删除的id')" href="javascript:;">
            <i class="layui-icon">&#xe640;</i>
        </a>
    </script>


    <table class="layui-table" id="goodsList" lay-filter="test">

    </table>
</div>


<script>

    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });


    var allIds = [];
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.$;
        var layer = layui.layer;
        table.render({
            elem: '#goodsList'
            , url: '../goods/showGoods' //数据接口
            , page: true //开启分页
            , limit: 5
            , limits: [1, 2, 3, 5, 10, 20, 30, 50]//设置每页显示条数的选项列表
            , cols: [[ //表头
                {field: 'checkbox',title:'checkbox', width: '4%',type:'checkbox',},
                {field: 'gid', title: '商品编号', width: '6%', align: 'center'},
                {field: 'gName', title: '商品名称', width: '10%', align: 'center'},
                // {field: 'gImg', title: '商品图片', width: '10%', align: 'center'},
                {field: 'gImg', title: '商品图片',width: '10%', align: 'center',templet: function (data) {
                        let imgSrc= data.gImg;
                        return "<img src='../"+imgSrc+"' width='80px' height='80px' class='layui-circle'/>"
                    }},
                {field: 'gPrice', title: '商品单价', width: '10%', align: 'center'},
                {field: 'num', title: '库存数量', width: '10%', align: 'center'},
                {field: 'type', title: '商品类型', width: '10%', align: 'center'},
                {field: 'gDetails', title: '商品描述', width: '20%', align: 'center'},
                {field: 'gColour', title: '商品颜色', width: '10%', align: 'center'},
                {field: 'op', title: '操作', width: '10%', align: 'center', templet: "#barDemo"}
            ]],

        });


        // 表的重载
        $(document).on('click', '#btn', function () {
            let gname = $('#gname').val();
            let lowernum = $('#lowernum').val();
            let uppernum = $('#uppernum').val();
            let retNum = /^\d*$/;//匹配数字

            if (retNum.test(lowernum) && retNum.test(uppernum)) {
                table.reload('goodsList', {
                    url: '../goods/goodsLike',
                    where: {
                        gname: gname,
                        lowernum: lowernum,
                        uppernum: uppernum,
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                })
                $('#error').text('');
            }else {
                $('#error').text('请输入正确的价格格式！！！');
            }

        });


        // 批量删除
        $('#delAll').click(function () {
            var checkData = table.checkStatus('goodsList');
            var data = checkData.data;
            console.log(checkData)
            if(data.length === 0){
                layer.msg('请选择数据');
            }else {
                layer.confirm('确认要删除吗？', function (index) {
                    // 获取data里面所有的id
                    var ids = [];
                    for(i=0;i<data.length;i++){
                        ids.push(data[i].gid);
                    }
                    console.log(ids)
                    // 通过ajax把ids传给后端
                    $.ajax({
                        url:'../goods/delAll',
                        type:'POST',
                        data: 'ids='+ids,
                        success:function (data) {
                            if(parseInt(data)===1){
                                // 重载表格
                                table.reload('goodsList');
                                layer.close(index);
                            }
                        }
                    });
                })
            }
        });


        // 行工具条事件
        table.on('tool(test)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行tr的 DOM 对象

            if (layEvent === 'del') {
                layer.confirm('确认要删除吗？', function (index) {
                    $.ajax({
                        url: '../goods/delGoods',
                        data: 'gid=' + data.gid,
                        success: function (data) {
                            if (parseInt(data) === 1) {
                                //后台删除成功 ，就把页面上的数据移除
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                                layer.msg('已删除!', {icon: 1, time: 1000});
                            }
                        }
                    });
                });
            } else if (layEvent === 'edit') {

                layer.open({
                    type: 2,
                    shade: false,
                    title: "修改商品信息",
                    area: ['1200px', '600px'],
                    content: 'goods-edit.html',
                    data: 'gid=' + data.gid,
                    zIndex: layer.zIndex, //重点1
                    success: function (layero) {
                        layer.setTop(layero); //重点2

                        //获得弹出层的body部分
                        var body = layui.layer.getChildFrame("body");

                        //给body中的控件赋值
                        body.find("[name='gid']").val(data.gid);
                        body.find("[name='gname']").val(data.gName);
                        body.find("[name='gimgSrc']").val(data.gImg);
                        /*body.find("[name='gimg']",function (data) {
                            console.log(data.gimg)
                        });*/
                        //body.find("[name='gimg']").attr('src',data.gImg);
                        body.find("[name='gprice']").val(data.gPrice);
                        body.find("[name='gcount']").val(data.num);
                        body.find("[name='type']").val(data.type);
                        body.find("[name='gdetails']").val(data.gDetails);
                        body.find("[name='gcolor']").val(data.gColour);


                        //获得弹出层的window
                        var updateWin = layero.find('iframe')[0].contentWindow;
                        //渲染弹出层中的表单组件
                        updateWin.layui.form.render("radio");
                    }
                });
            }
        });

    });
</script>
</body>

</html>